<template>
  <div id="app">
    <root>
      <safe-header
        v-bind="{
          title: '库存转移',
          isBack: true,
          backIconColor: '#fff',
          fixedTop: true,
        }"
      />
      <div>
        <v-container class="mt-2 pa-3">
          <v-card class="containerTransferCard" height="160">
            <v-row class="ma-0 pa-2" style="height: 100%">
              <!-- 顶部card -->
              <v-col
                cols="12"
                class="d-flex justify-center align-start pa-1 box_top"
                style="height: 50%"
              >
                <div class="box_top_content" @click="showBoxInfo">
                  {{ ctInfoFrom.boxCode }}
                </div>
                <v-dialog v-model="showBoxInfoDialog" max-width="600">
                  <v-card class="box_top_content_dialogCard">
                    <v-card-title class="box_top_content_dialogCard_title"
                      >库存详情</v-card-title
                    >
                    <v-card-text style="padding: 8px">
                      <v-container>
                        <v-row>
                          <v-col cols="12" class="pa-0 pb-2">
                            <v-card outlined style="background-color: #f2f3f5">
                              <v-card-subtitle class="list_content">
                                <v-row
                                  class="
                                    d-flex
                                    flex-row
                                    justify-space-between
                                    wms-v-row
                                  "
                                >
                                  <v-col cols="4" class="py-1 card-lable"
                                    >物料编码</v-col
                                  >
                                  <v-col class="py-1 card-value">
                                    {{ ctInfoFrom.ctInfo.itemCode }}
                                  </v-col>
                                </v-row>
                                <v-row
                                  class="
                                    pa-0
                                    d-flex
                                    flex-row
                                    justify-space-between
                                    wms-v-row
                                  "
                                >
                                  <v-col cols="4" class="py-1 card-lable"
                                    >物料名称</v-col
                                  >
                                  <v-col class="py-1 card-value">
                                    {{ ctInfoFrom.ctInfo.itemName }}
                                  </v-col>
                                </v-row>
                                <v-row
                                  class="
                                    pa-0
                                    d-flex
                                    flex-row
                                    justify-space-between
                                    wms-v-row
                                  "
                                >
                                  <v-col cols="4" class="py-1 card-lable"
                                    >批次</v-col
                                  >
                                  <v-col class="py-1 card-value">
                                    {{ ctInfoFrom.ctInfo.batchName }}
                                  </v-col>
                                </v-row>
                                <v-row
                                  class="
                                    pa-0
                                    d-flex
                                    flex-row
                                    justify-space-between
                                    wms-v-row
                                  "
                                >
                                  <v-col cols="4" class="py-1 card-lable"
                                    >数量</v-col
                                  >
                                  <v-col class="py-1 card-value">
                                    {{ ctInfoFrom.ctInfo.qty }}
                                  </v-col>
                                </v-row>
                              </v-card-subtitle>
                            </v-card>
                          </v-col>
                        </v-row>
                      </v-container>
                    </v-card-text>
                  </v-card>
                </v-dialog>
              </v-col>
              <v-col
                cols="12"
                style="height: 50%"
                class="d-flex py-0 px-1 box_bottom"
              >
                <v-row class="d-flex justify-space-between align-center ma-0">
                  <v-col
                    cols="5"
                    class="
                      d-flex
                      flex-column
                      pa-0
                      align-center
                      justify-center
                      box_bottom_content
                    "
                  >
                    <span style="min-height: 24px" class="cell-value">
                      {{ ctInfoFrom.srcCell ? ctInfoFrom.srcCell : "" }}
                    </span>
                    <span class="mt-2 cell-label">来源库位</span>
                  </v-col>
                  <v-col
                    class="
                      align-self-start
                      box_bottom_center
                      d-flex
                      justify-center
                      align-center
                      px-0
                      py-3
                    "
                  >
                    <div class="jiantou"></div>
                  </v-col>
                  <v-col
                    cols="5"
                    class="
                      d-flex
                      flex-column
                      pa-0
                      align-center
                      justify-center
                      box_bottom_content
                    "
                  >
                    <span style="min-height: 24px" class="cell-value">
                      {{ ctInfoFrom.trgCell ? ctInfoFrom.trgCell : "" }}
                    </span>
                    <span class="mt-2 cell-label">目标库位</span>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
          </v-card>
        </v-container>
        <v-container class="mt-2 py-2 px-0 containerTransfer-bottom">
          <v-form ref="pickingForm" class="containerTransfer">
            <v-row class="pa-0">
              <v-col cols="12" class="py-1">
                <v-text-field
                  v-model="ctInfoFrom.srcCell"
                  @keydown.13="searchCellCode"
                  label="来源库位"
                  placeholder="请输入或扫描来源库位"
                  clearable
                  autofocus
                ></v-text-field>
              </v-col>
              <v-col cols="12" class="py-1">
                <v-text-field
                  id="itemCode"
                  v-model="ctInfoFrom.boxCode"
                  @keydown.13="searchBoxCode"
                  label="追踪号"
                  placeholder="请扫描追踪号"
                  clearable
                ></v-text-field>
              </v-col>
              <v-col cols="12" class="py-1">
                <v-text-field
                  id="trgCell"
                  :readonly="srcCellDisable"
                  v-model="ctInfoFrom.trgCell"
                  clearable
                  label="目标库位"
                  placeholder="请输入或扫描目标库位码"
                  hint=""
                  @keydown.13="scanCellCode"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-form>
        </v-container>
        <div v-show="hidshow" class="footer">
          <v-bottom-navigation
            height="60"
            style="background: transparent; box-shadow: none"
          >
            <v-row
              class="pa-0 ma-0 justify-center"
              style="background: transparent"
            >
              <v-col
                cols="12"
                class="
                  pa-0
                  ma-0
                  d-flex
                  justify-center
                  align-center
                  mb-2
                  px-2
                  py-1
                "
                style="background: transparent"
              >
                <v-btn
                  class="wms-submit-btn"
                  block
                  color="#193690"
                  style="
                    height: 100%;
                    border-radius: 10px;
                    color: #fff !important;
                  "
                  @click="submit"
                  >提交</v-btn
                >
              </v-col>
            </v-row>
          </v-bottom-navigation>
        </div>
        <v-overlay :value="overlay">
          <v-progress-circular indeterminate size="64"></v-progress-circular>
        </v-overlay>
      </div>
    </root>
  </div>
</template>

<script>
import SafeHeader from "../../components/safeHeader_wms";
import Root from "@/components/Root.vue";
import wms from "@/utils/business_wms";
export default {
  name: "ContainerTransfer",
  components: {
    Root,
    SafeHeader,
  },
  data() {
    return {
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      hidshow: true,

      srcCellDisable: true,
      ctInfoFrom: {
        srcCell: "",
        trgCell: "",
        cellCode: "",
        boxCode: "",
        ctInfo: {},
        srcItemInfo: "",
      },
      // 容器详情弹框
      showBoxInfoDialog: false,
      //遮罩
      overlay: false,
    };
  },

  methods: {
    showBoxInfo() {
      if (this.ctInfoFrom.ctInfo.length !== 0) {
        this.showBoxInfoDialog = true;
      }
    },

    // 扫库位查询库存
    searchCellCode() {
      //查询库存
      this.overlay = true;
      wms
        .get({
          url: "/inventorys/list",
          data: { cellCode: this.ctInfoFrom.srcCell },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            let invt = res.data.data.list;
            if (invt.length == 0) {
              this.overlay = false;
              return alert("未查询到相关库存");
            }
            // 库存数量为一条直接带出相关数据
            if (invt.length == 1) {
              // 提示提交成功
              this.srcCellDisable = false;
              this.ctInfoFrom.ctInfo = {
                itemCode: invt[0].itemCode,
                itemName: invt[0].itemName,
                batchName: invt[0].batchName,
                qty: invt[0].quantity,
              };
              this.ctInfoFrom.boxCode = invt[0].boxCode;
              //光标跳转
              document.getElementById("trgCell").focus();
            } else {
              //光标跳转
              document.getElementById("itemCode").focus();
            }
            this.overlay = false;
          } else {
            this.ctInfoFrom.cellCode = "";
            alert(res.data.message);
            this.overlay = false;
          }
        });
    },

    // 扫追踪号
    searchBoxCode() {
      //解析容器条码
      let boxCode = this.ctInfoFrom.boxCode;
      //查询库存 用批次和来源库作为条件查询
      this.overlay = true;
      wms
        .get({
          url: "/inventorys/list",
          data: { boxCode: boxCode },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            let invt = res.data.data.list;
            if (invt.length == 0) {
              this.overlay = false;
              return alert("未查询到相关库存");
            }
            // 库存数量为一条直接带出相关数据
            if (invt.length == 1) {
              // 提示提交成功
              this.srcCellDisable = false;
              this.ctInfoFrom.ctInfo = {
                srcCell: invt[0].cellCode,
                itemCode: invt[0].itemCode,
                itemName: invt[0].itemName,
                batchName: invt[0].batchName,
                qty: invt[0].quantity,
              };
              //光标跳转
              document.getElementById("trgCell").focus();
            }
            this.overlay = false;
          } else {
            this.ctInfoFrom.cellCode = "";
            alert(res.data.message);
            this.overlay = false;
          }
        });
    },

    scanCellCode() {
      this.overlay = true;
      wms
        .get({
          url: "/inventorys/list",
          data: {
            cellCode: this.ctInfoFrom.trgCell,
          },
        })
        .then((res) => {
          this.overlay = false;
          if (res.status == 200 && res.data.code == 200) {
            console.log(JSON.stringify(res.data.data));
            let stockData = res.data.data.list;
            //卓品逻辑，要判断是否是电子料架，电子料架只能放一个料

            if (stockData.length == 0) {
              this.$root.api.api.toast({ msg: "无数据", location: "middle" });
              //卓品的电子料架推荐逻辑
              let cellCodes = [];
              cellCodes.push(this.ctInfoFrom.trgCell);
              let params = {
                cellCodes: cellCodes,
                time: 30,
                lighttype: 1, //亮灯
              };
              wms
                .post({
                  url: "/cell/infos/operate",
                  data: params,
                })
                .then((res) => {
                  this.overlay = false;
                  if (res.status === 200 && res.data.code === 200) {
                    //成功，不需要有任何提示
                  } else {
                    alert(res.data.message);
                  }
                  console.log(res);
                });
            } else {
              let startCellCodeStr =
                this.ctInfoFrom.trgCell.substr(0, 2);
              if (startCellCodeStr != "zp") {
                this.$root.api.api.toast({
                  msg: "该库位已有库存",
                  location: "middle",
                  duration: 5000,
                });
              }
            }
            this.stockInfo = stockData;
          } else {
            alert(res.data.message);
          }
        });
    },

    // 提交
    submit() {
      //校验
      if (
        !this.ctInfoFrom.trgCell ||
        !this.ctInfoFrom.srcCell ||
        !this.ctInfoFrom.boxCode
      ) {
        return;
      }
      if (this.ctInfoFrom.trgCell == this.ctInfoFrom.srcCell) {
        return this.$root.api.api.toast({
          msg: "来源库位与目标库位不允许一致",
          location: "middle",
        });
      }

      //遮罩
      this.overlay = true;
      let upper = {
        boxCode: this.ctInfoFrom.boxCode,
        cellCode: this.ctInfoFrom.trgCell,
      };
      wms
        .post({
          url: "/transfer/create/transfer",
          data: upper,
        })
        .then((res) => {
          this.overlay = false;
          if (res.status == 200 && res.data.code == 200) {
            //提交成功，提示成功
            alert("转移成功");

            //刷新页面
            window.location.reload();
          } else {
            alert(res.data.message);
          }
        });
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
  },
  watch: {
    showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.footer {
  position: absolute;
  padding-top: 65px;
  width: 100%;
  bottom: 0;
}

.containerTransfer-bottom {
  .row {
    margin: 0;
  }
  .containerTransfer {
    background-color: #fff;
  }
}
.containerTransferCard {
  .box_top {
    .box_top_content {
      width: 40%;
      height: 100%;
      border-radius: 8px;
      background-color: #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffc352;
      font-weight: bold;
      text-decoration: underline;
    }
  }
  .box_bottom {
    .box_bottom_content {
      margin-top: 18px;
      .cell-value {
        padding: 2px 4px;
        width: 90%;
        font-weight: bold;
        font-size: 14px;
        background-color: #627aec;
        color: #fff;
        text-align: center;
      }
      .cell-label {
        font-size: 13px;
        color: #979899;
        font-weight: bold;
      }
    }
    .box_bottom_center {
      background-color: #f2f3f5;
      .jiantou {
        margin-top: 2px;
        width: 90%;
        border: 1px solid #627aec;
        position: relative;
        &::before {
          content: "";
          border: 6px solid transparent;

          border-top: 6px solid #627aec;
          transform: rotate(45deg);
          width: 3px;
          position: absolute;
          right: 1px;
          top: -6px;
        }
      }
    }
  }
}
.box_top_content_dialogCard {
  .box_top_content_dialogCard_title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffb220;
    color: #fff;
    padding: 12px 24px 8px !important;
  }
  .card-value {
    text-align: end;
  }
}
</style>